<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Forms stuff</a></li>
        <li>Form elements</li>
    </ul>        
</div>

<div class="content">
            
    <div class="row-fluid">
        
        <div class="span6">                

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-pencil2"></i></div>
                    <h2>Default form elements</h2>
                </div>                        
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span2">Input Text:</div>
                        <div class="span10"><input type="text" placeholder="Placeholder example"/></div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Input Password:</div>
                        <div class="span10"><input type="password" value="inputpassword"/></div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Readonly:</div>
                        <div class="span10"><input type="text" value="Readonly value" readonly="readonly"/></div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Disabled:</div>
                        <div class="span10"><input type="text" value="Disabled value" disabled="disabled"/></div>
                    </div>                    
                    <div class="row-form">
                        <div class="span2">Textarea:</div>
                        <div class="span10"><textarea placeholder="Placeholder example"></textarea></div>
                    </div>

                    <div class="toolbar bottom TAL">
                        <button class="btn btn-primary">Submit</button>
                    </div>

                </div>
            </div>
            
        </div>
        
        <div class="span6">                

            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-heart1"></i></div>
                    <h2>Inputs with pre/appends</h2>
                </div>                                    
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span2">Prepend:</div>
                        <div class="span10">
                            <div class="input-prepend">
                                <span class="add-on"><i class="icon-envelope"></i></span>
                                <input type="text"/>                               
                            </div>                  
                            <span class="bottom">Controlled by JavaScript</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Append:</div>
                        <div class="span10">
                            <div class="input-append">                                
                                <input type="text"/>
                                <span class="add-on"><i class="icon-user"></i></span>
                            </div>                                                        
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Both:</div>
                        <div class="span10">                            
                            <div class="input-append input-prepend">                                
                                <span class="add-on"><i class="icon-fire"></i></span>
                                <input type="text"/>
                                <span class="add-on"><i class="icon-magnet"></i></span>
                            </div>                                                        
                        </div>
                    </div>   
                    <div class="row-form">
                        <div class="span2">Prepend button:</div>
                        <div class="span10">
                            <div class="input-prepend">
                                <button class="btn" type="button">Left</button>
                                <input type="text"/>                                
                            </div>                            
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Append button:</div>
                        <div class="span10">
                            <div class="input-append">
                                <input type="text"/>
                                <button class="btn" type="button">Right</button>
                            </div>                            
                        </div>
                    </div>                                     
                    <div class="row-form">
                        <div class="span2">Both:</div>
                        <div class="span10">
                            <div class="input-prepend input-append">
                                <button class="btn" type="button">Left</button>
                                <input type="text"/>                              
                                <button class="btn" type="button">Right</button>
                            </div>                            
                        </div>
                    </div>

                    <div class="toolbar bottom TAR">
                        <button class="btn btn-primary">Submit</button>
                    </div>

                </div>                
            </div>
            
        </div>            
        
    </div>
    
    <div class="row-fluid">
        
        <div class="span6">
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-pencil3"></i></div>
                    <h2>Custom form elements</h2>
                </div>                  
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span2">Select:</div>
                        <div class="span10">
                            <select name="s_example">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4">Germany</option>
                                <option value="5">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10">Ukraine</option>                                                                       
                            </select>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span2">Multiple:</div>
                        <div class="span10">
                            <select name="s_example" multiple="multiple">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4">Germany</option>
                                <option value="5">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10">Ukraine</option>                                                                       
                            </select>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span2">Select2:</div>
                        <div class="span10">
                            <select name="s_example" class="select" style="width: 100%;">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4">Germany</option>
                                <option value="5">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10">Ukraine</option>                                                                       
                            </select>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span2">Select2 multiple:</div>
                        <div class="span10">
                            <select name="s_example" multiple="multiple" class="select" style="width: 100%;">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4">Germany</option>
                                <option value="5">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10" selected="selected">Ukraine</option>                                                                       
                            </select>
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">Tags input:</div>
                        <div class="span10">
                            <input type="text" class="tags" value="PHP,JavaScript,CSS,HTML"/>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span2">Checkbox:</div>
                        <div class="span10">
                            <input type="checkbox" checked="checked" value="1"/>Checked 
                            <input type="checkbox" value="2"/>Unchecked 
                            <input type="checkbox" checked="checked" disabled="disabled" value="3"/>Disabled
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">Radio:</div>
                        <div class="span10">
                            <input type="radio" checked="checked" name="r_example" value="1"/>Checked 
                            <input type="radio" name="r_example" value="2"/>Unchecked 
                            <input type="radio" checked="checked" disabled="disabled" name="r_example_1" value="3"/>Disabled 
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">File:</div>
                        <div class="span10">                            
                            <div class="input-append file">
                                <input type="file" name="file"/>
                                <input type="text"/>
                                <button class="btn">Browse</button>
                            </div>                            
                        </div>
                    </div>   
                    
                    <div class="row-form">
                        <div class="span2">Spinner:</div>
                        <div class="span4">                                                            
                            <input type="text" name="spi" id="spinner" value="1"/>
                        </div>
                        <div class="span2">Currency:</div>
                        <div class="span4">                                                            
                            <input type="text" name="sp" id="spinner1" value="5"/>
                        </div>                            
                    </div>                         
                    
                    <div class="row-form">
                        <div class="span2">Datepicker:</div>
                        <div class="span10">                                                            
                            <input type="text" class="datepicker"/>
                        </div>
                    </div>                                                 
                    
                    
                    <div class="toolbar bottom TAR">
                        <button class="btn btn-primary">Submit</button>
                    </div>                    
                </div>
            </div>
               
        </div>
        
        <div class="span6">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-pencil"></i></div>
                    <h2>Other text inputs</h2>
                </div>                   
                <div class="block-fluid">

                    <div class="row-form warning">
                        <div class="span2">Warning</div>
                        <div class="span10">
                            <span class="top">Lorem ipsum dolor sit amet</span>
                            <input type="text"/>
                        </div>
                    </div>

                    <div class="row-form error">
                        <div class="span2">Error</div>
                        <div class="span10">
                            <input type="text"/>
                            <span class="bottom">Lorem ipsum dolor sit amet</span>
                        </div>
                    </div>

                    <div class="row-form success">
                        <div class="span2">Success</div>
                        <div class="span10">
                            <input type="text"/>                            
                        </div>
                    </div>                    

                    <div class="row-form info">
                        <div class="span2">Info</div>
                        <div class="span10">
                            <input type="text"/>
                        </div>
                    </div>                                        

                    <div class="row-form">
                        <div class="span2">Custom length</div>
                        <div class="span10">                            
                            <div><input class="input-mini" type="text" placeholder=".input-mini 30%"/></div>
                            <div><input class="input-small" type="text" placeholder=".input-small 40%"/></div>
                            <div><input class="input-medium" type="text" placeholder=".input-medium 50%"/></div>
                            <div><input class="input-large" type="text" placeholder=".input-large 60%"/></div> 
                            <div><input class="input-xlarge" type="text" placeholder=".input-xlarge 70%"/></div> 
                            <div><input class="input-xxlarge" type="text" placeholder=".input-xxlarge 80%"/></div>                             
                            <div><input class="input-huge" type="text" placeholder=".input-huge 90%"/></div>
                        </div>
                    </div>
                    <div class="toolbar bottom TAL">
                        <button class="btn btn-primary">Submit</button>
                    </div>                        
                </div>
            </div>
        </div>
        
    </div>
    
    <div class="row-fluid">
        
        <div class="span6">
            
            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-lab"></i></div>
                    <h2>Masked inputs</h2>
                </div>                  
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span2">Date:</div>
                        <div class="span10">
                            <input type="text" class="mask_date" value=""/>
                            <span class="bottom">Example: 2012-12-21</span>
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">Phone:</div>
                        <div class="span10">
                            <input type="text" class="mask_phone" value=""/>
                            <span class="bottom">Example: 98 (765) 432-10-98</span>
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">Phone + Ext:</div>
                        <div class="span10">
                            <input type="text" class="mask_phone_ext" value=""/>
                            <span class="bottom">Example: 98 (765) 432-10-98 x9999</span>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span2">Credit:</div>
                        <div class="span10">
                            <input type="text" class="mask_credit" value=""/>
                            <span class="bottom">Example: 9876-5432-1098-7654</span>
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">TIN:</div>
                        <div class="span10">
                            <input type="text" class="mask_tin" value=""/>
                            <span class="bottom">Example: 98-7654321</span>
                        </div>
                    </div>

                    <div class="row-form">
                        <div class="span2">SSN:</div>
                        <div class="span10">
                            <input type="text" class="mask_ssn" value=""/>
                            <span class="bottom">Example: 987-65-4321</span>
                        </div>
                    </div>                    
                    <div class="row-form">
                        <div class="span2">Product:</div>
                        <div class="span10">
                            <input type="text" class="mask_product" value=""/>
                            <span class="bottom">Example: A1-234-B567</span>
                        </div>
                    </div>                       

                    <div class="row-form">
                        <div class="span2">Percent:</div>
                        <div class="span10">
                            <input type="text" class="mask_percent" value=""/>
                            <span class="bottom">Example: 50%</span>
                        </div>
                    </div>                            

                    <div class="toolbar bottom TAC">
                        <button class="btn btn-primary">Submit</button>
                    </div>                    

                </div>
            </div>
        </div>
        
        <div class="span6">
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-reply1"></i></div>
                    <h2>Multiselect</h2>
                </div>                  
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span12">
                            <span class="top title">Default:</span>
                            <select name="ms_example" multiple="multiple" id="ms">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4" selected="selected">Germany</option>
                                <option value="5">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10" selected="selected">Ukraine</option>                                                                       
                            </select>
                        </div>
                    </div>                    

                    <div class="row-form">
                        <div class="span12">
                            <span class="top title">With controls:</span>                        
                            <select name="ms_example" multiple="multiple" id="msc">
                                <option value="0">choose a option...</option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>
                                <option value="3">Bulgaria</option>
                                <option value="4">Germany</option>
                                <option value="5" selected="selected">Dominican Republic</option>
                                <option value="6">Micronesia</option>
                                <option value="7">United Kingdom</option>
                                <option value="8">Greece</option>
                                <option value="9">Italy</option>
                                <option value="10" selected="selected">Ukraine</option>                                                                       
                            </select>
                            <div class="btn-group">
                                <button class="btn btn-mini btn-primary" id="ms_select">Select all</button>
                                <button class="btn btn-mini btn-primary" id="ms_deselect">Deselect all</button>
                            </div>
                        </div>
                    </div>                    

                    <div class="toolbar bottom TAC">
                        <button class="btn btn-primary">Submit</button>
                    </div>  
                    
                </div>
            </div>
        </div>
        
    </div>
    
    <div class="row-fluid">
        <div class="span6">

            <div class="widget">
                <div class="head dark">
                    <div class="icon"><i class="icos-apple"></i></div>
                    <h2>iPhone style buttons</h2>
                </div>                  
                <div class="block-fluid">
                    <div class="row-form">
                        <div class="span2">Select:</div>
                        <div class="span10">
                            <input type="checkbox" name="iexc_1" class="ibtn"/> 
                            <input type="checkbox" name="iexc_1" checked="checked" class="ibtn"/> 
                            <input type="checkbox" name="iexc_1" class="ibtn" disabled="disabled"/>
                        </div>
                    </div>                         
                    <div class="row-form">
                        <div class="span2">Radio:</div>
                        <div class="span10">
                            <input type="radio" name="iexr_1" class="ibtn"/> 
                            <input type="radio" name="iexr_1" checked="checked" class="ibtn"/> 
                            <input type="radio" name="iexr_1" class="ibtn" disabled="disabled"/>                                
                        </div>
                    </div>                        
                </div>
            </div>
            
        </div>
    </div>
    
    
</div>  